<template>
  <div id="divm">
    <div id="divo">
      <h1 id="title">欢迎来到我们真菜</h1>
      <img src="../../assets/img6.jpg" id="pic">
        <el-form :label-position="labelPosition" label-width="80px" :model="formData" id="for">
          <el-form-item label="账号" class="formData">
            <el-input  v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="formData">
            <el-input  v-model="formData.password"></el-input>
          </el-form-item>
          <el-button type="primary" id="submit" @click="login('formData')">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data(){
    return{
      labelPosition: 'right',
      formData:{
        name:"",
        password:""
      }
    }
  },
  methods:{
    login(formData){
      console.log(formData);
      router.push({path: '/background/welcome'});
    }
  }
}
</script>

<style scoped>
#divm{
  position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: linear-gradient(to bottom right,#0783c1, #6abedc, #f6f6f6);
}
#divo{
  position: absolute;
    left: 15%;
   right: 15%;
   top: 15%;
   bottom: 15%; 
   border: 10px inset rgb(27, 104, 198);
   box-shadow: 20px 20px 10px 3px #000;  /*Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+*/
   -webkit-box-shadow: 10px 8px 10px 3px #000;
   -moz-box-shadow: 10px 8px 10px 3px #000;
     /*background-clip: padding-box;*/
  opacity: 0.9; /*透明度*/

}
#title{
  margin-left: 110px;
    margin-top: 50px;
    color:aliceblue;
}
#stitle{
  text-align: center;
  margin-top: 15px;
  color: gray;
}
#pic{
  position:absolute;
    right: 0%;
    top: 0%;
    bottom: 0%;  
    width: 530px;
    height: 488px;
}
#for{
    margin-left: 68px;
    margin-top: 20px;
    font-size: 20px;
 }
.formData{
  width: 300px;
  height: 30px;
  margin-top: 40px;
}
#submit{
   width: 225px;
    height: 30px;
    margin-top: 20px;
    margin-left: 77px;
}
</style>
